<template>
    <div class="led-color-input">
        <n-color-picker :swatches="ledConfig.ledColors" 
                        v-model:value="color" :modes="['hex','rgb']" style="width:5rem;" @update:value="updateColor" />
        <n-checkbox v-model:checked="randomColor" @update:checked="updateColor">
            random-color
        </n-checkbox>
    </div>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { ledConfigStore } from '@/stores/ledconfig';
import { NCheckbox, NColorPicker } from 'naive-ui';

const randomColor = ref(false);
const modelValue = defineModel<string>("modelValue");

const ledConfig = ledConfigStore();
const color = ref(ledConfig.ledColors[0]);

const updateColor = () => {
    if (randomColor.value) {
        modelValue.value = "";
    } else {
        modelValue.value = color.value;
    }
}

onMounted(() => {
    if (modelValue.value === "") {
        randomColor.value = true;
    } else if (modelValue.value) {
        color.value = modelValue.value;
    }
})

</script>
<style lang="scss" scoped>
.led-color-input {
    display: flex;
    align-items: center;
    gap: 1rem;
}
</style>